
<template>
  <div class="main-wrapper">
    <div class="main-head-wrapper"></div>
    <div class="main-content-wrapper">
      <el-row>
        <el-col :span="12">
          <div class="box-wrapper">
            <el-tree
              :data="bookmarks"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
/* eslint-disable no-undef */
export default {
  data() {
    return {
      bookmarks: [], // 书签数据
      oderBookmarks: [],
      defaultProps: {
        children: "children",
        label: "title",
        class: (data) => {
          console.log(data);
          if (data.children && data.children.length > 0) {
            return "bookmarkParent";
          }
          return null;
        },
      },
    };
  },
  beforeCreate() {
    chrome.runtime.sendMessage({ order: "getBookmarks" });
    chrome.runtime.onMessage.addListener((res) => {
      //   this.bookmarks = res.bookmarks?res.bookmarks[0].children:[];
      const _bookmarks = res.bookmarks[0].children;
      _bookmarks[0].children.length > 0 &&
        (this.bookmarks = _bookmarks[0].children);
      _bookmarks[1].children.length > 0 &&
        (this.oderBookmarks = _bookmarks[1].children);
      //   console.log("bookmark",_bookmarks, JSON.stringify(this.bookmarks),  this.oderBookmarks);
    });
  },
  methods: {
    handleNodeClick(data) {
      if (data.url) {
        window.open(data.url, "_blank");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {display:none}
.main-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  // background-color: #000;
  background: url("../../assets/images/theme/theme1.jpg") no-repeat center/cover;
  .main-head-wrapper {
    padding: 60px 0;
  }
  .main-content-wrapper {
    max-width: 1350px;
    margin: 0 auto 30px;
    padding: 0 45px;
    height: calc(100% - 120px);
    overflow-y: auto;
    
  }
}
.bookmarkParent > .el-tree-node__content > .el-tree-node__label {
  // color: #fff !important;
  font-size: 14px !important;
}
.box-wrapper {
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
   ::v-deep .el-tree {
    background: transparent;
    color: #fff !important;
    font-size: 12px !important;
    .el-tree-node__expand-icon {
      color: #fff;
    }
    .el-tree-node__expand-icon.is-leaf {
      color: transparent !important;
    }
    // .el-tree-node.is-current,
    .el-tree-node__content:hover {
      background-color: rgba(255, 255, 255, 0.2) !important;
    }
    .el-tree-node__label {
      font-size: 12px !important;
    }
  }
}
</style>